<template>
  <div class="resource-merge">
    <el-dialog
      ref="mergeList"
      :before-close="handleClose"
      :append-to-body="false"
      :modal-append-to-body="false"
      :visible.sync="dialogVisible"
      :class="{'mobile-el-dialog': showMobilePage}"
      class="merge-resource-dialog"
      lock-scroll
      top="10vh"
      width="1000px">
      <div class="main">
        <Title title="合并资源" font-size="16px" style="margin-bottom: 10px;">
          <span class="right-tip">请确认合并源</span>
        </Title>
        <div class="merge-table">
          <el-table
            ref="mergeTable"
            :data="handleData(mergeData)"
            :row-class-name="tableRowClassName"
            max-height="400px"
            empty-text="暂无数据"
            header-cell-class-name="order-data-header-cell"
            fit
          >
            <el-table-column :fixed="!showMobilePage" align="center" label="合并源" min-width="70">
              <template slot-scope="scope">
                <div :class="{'selected':isSelect(scope.row.mediumId)}" class="radios" @click="changeMainId(scope.row.mediumId)"/>
              </template>
            </el-table-column>
            <el-table-column :fixed="!showMobilePage" align="left" label="账号" min-width="110">
              <template slot-scope="scope">
                <el-tooltip v-if="scope.row.resourceName" class="scope.row" placement="top" effect="dark">
                  <div slot="content" style="max-width: 200px;">{{ scope.row.resourceName }}</div>
                  <div class="resource-name ellipsisOne" style="max-width: 105px;">{{ scope.row.resourceName }}</div>
                </el-tooltip>
                <div v-else>--</div>
              </template>
            </el-table-column>
            <el-table-column :fixed="!showMobilePage" align="left" label="账号ID" min-width="110">
              <template slot-scope="scope">
                <el-tooltip v-if="scope.row.baseInfo.accountId" class="scope.row" placement="top" effect="dark">
                  <div slot="content" style="max-width: 200px;">{{ scope.row.baseInfo.accountId }}</div>
                  <div class="resource-name ellipsisOne" style="max-width: 105px;">{{ scope.row.baseInfo.accountId }}</div>
                </el-tooltip>
                <div v-else>--</div>
              </template>
            </el-table-column>
            <el-table-column align="left" label="下单平台" min-width="100">
              <template slot-scope="scope">
                <div class="flex-center ellipsisOne">
                  <platformIcon :class="{'gray-filter': scope.row.status === 0}" :data="scope.row.platformTypeName" />
                  {{ scope.row.platformTypeName || '--' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="left" label="所属经营体" min-width="130">
              <template slot-scope="scope">
                <el-tooltip v-if="scope.row.attributionMatrixName" class="scope.row" placement="top" effect="dark">
                  <div slot="content" style="max-width: 200px;">{{ scope.row.attributionMatrixName }}</div>
                  <div class="resource-name ellipsisOne" style="max-width: 120px;">{{ scope.row.attributionMatrixName }}</div>
                </el-tooltip>
                <div v-else>--</div>
              </template>
            </el-table-column>
            <el-table-column align="left" label="协作部门" min-width="130">
              <template slot-scope="scope">
                <el-tooltip v-if="scope.row.cooperationDepartmentNames" class="scope.row" placement="top" effect="dark">
                  <div slot="content" style="max-width: 200px;">{{ scope.row.cooperationDepartmentNames }}</div>
                  <div class="resource-name ellipsisOne" style="max-width: 120px;">{{ scope.row.cooperationDepartmentNames }}</div>
                </el-tooltip>
                <div v-else>--</div>
              </template>
            </el-table-column>
            <el-table-column align="left" label="链接" width="90">
              <template slot-scope="scope">
                <el-tooltip v-if="scope.row.resourceLink" placement="top" effect="dark">
                  <div slot="content" style="max-width: 200px;">{{ scope.row.resourceLink }}</div>
                  <a
                    v-if="scope.row.resourceLink.indexOf('http://') === 0 || scope.row.resourceLink.indexOf('https://') === 0"
                    :href="scope.row.resourceLink"
                    target="_blank"
                    class="name link-name">
                    点击跳转<img :class="{'gray-filter': scope.row.status === 0}" src="../../../assets/medium/link.png" alt="">
                  </a>
                  <div v-else class="resource-name ellipsisOne" style="max-width: 90px;">{{ scope.row.resourceLink }}</div>
                </el-tooltip>
                <div v-else>--</div>
              </template>
            </el-table-column>
            <el-table-column align="left" label="运营模式" min-width="100">
              <template slot-scope="scope">
                <el-tooltip v-if="scope.row.operateModeName" class="scope.row" placement="top" effect="dark">
                  <div slot="content" style="max-width: 200px;">{{ scope.row.operateModeName }}</div>
                  <div class="resource-name ellipsisOne" style="max-width: 105px;">{{ scope.row.operateModeName }}</div>
                </el-tooltip>
                <div v-else class="resource-name ellipsisOne">{{ scope.row.operateModeName || '--' }}</div>
              </template>
            </el-table-column>
            <el-table-column align="left" label="合作运营方" min-width="120">
              <template slot-scope="scope">
                <el-tooltip v-if="scope.row.cooperation && scope.row.cooperation.length > 5" class="scope.row" placement="top" effect="dark">
                  <div slot="content" style="max-width: 200px;">{{ scope.row.cooperation }}</div>
                  <div class="resource-name ellipsisOne" style="width: 110px;">{{ scope.row.cooperation }}</div>
                </el-tooltip>
                <div v-else class="resource-name ellipsisOne" style="width: 110px;">{{ scope.row.cooperation || '--' }}</div>
              </template>
            </el-table-column>
            <el-table-column align="left" label="所有人员" min-width="130">
              <template slot-scope="scope">
                <el-tooltip
                  v-if="scope.row.accountOperationName && scope.row.accountOperationName.length"
                  class="scope.row"
                  placement="top"
                  effect="dark" >
                  <div slot="content" style="max-width: 200px;">{{ scope.row.accountOperationName.join('/') }}</div>
                  <div class="resource-name ellipsisOne">{{ scope.row.accountOperationName.join('/') }}</div>
                </el-tooltip>
                <div v-else>--</div>
              </template>
            </el-table-column>
            <el-table-column align="left" label="订单数" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.orderNum || '--' }}
              </template>
            </el-table-column>
            <el-table-column align="left" label="有效" min-width="80">
              <template slot-scope="scope">
                {{ scope.row.status ? '是' : '否' }}
              </template>
            </el-table-column>
            <el-table-column align="left" label="是否挂靠" min-width="80">
              <template slot-scope="scope">
                {{ scope.row.microTask ? '是' : '否' }}
              </template>
            </el-table-column>
            <el-table-column align="left" label="系统ID" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.systemId || '--' }}
              </template>
            </el-table-column>
            <el-table-column align="left" label="创建人" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.createName || '--' }}
              </template>
            </el-table-column>
            <el-table-column align="left" label="创建时间" min-width="110">
              <template slot-scope="scope">
                <span v-if="scope.row.createTime">{{ scope.row.createTime | standardFormat('YYYY/MM/DD') }}</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="更新人" min-width="90">
              <template slot-scope="scope">
                {{ scope.row.updator || '--' }}
              </template>
            </el-table-column>
            <el-table-column align="left" label="更新时间" min-width="110">
              <template slot-scope="scope">
                <span v-if="scope.row.updateTime">{{ scope.row.updateTime | standardFormat('YYYY/MM/DD') }}</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="display:flex;padding: 0 24px;margin-top: 10px;">
          <div style="flex:1;display:flex;align-items:center;">
            <el-button :disabled="!hasSelect" class="search-btn-style" type="primary" size="small" @click="mergePost">合并</el-button>
            <el-button class="cancel-btn-style" style="margin-left: 16px;" type="info" size="small" @click="handleClose">取消</el-button>
          </div>
          <el-pagination
            v-if=" mergeData && mergeData.length > 0"
            :current-page="page "
            :page-size="perPage"
            :total="mergeData.length"
            :page-sizes="[10, 20, 50, 100, 250, 500]"
            :layout="showMobilePage?'prev, next':'prev, pager, next,sizes, jumper'"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </div>
    </el-dialog>
    <mergeDialog ref="mergeDialog" @mergeStart="mergeStart"/>
  </div>
</template>
<script>
import { standardFormat } from '@/filters/date';
// 组件
import Title from '@/components/Title';
import platformIcon from '@/components/Common/platformIcon';
import mergeDialog from './mergeDialog';
// API
import { newMerge } from '@/api/resource';
import { mapState } from 'vuex';

export default {
  filters: { standardFormat },
  components: {
    Title,
    platformIcon,
    mergeDialog
  },
  data() {
    return {
      mergeData: [],
      dialogVisible: false,
      mainId: '', // 合并源
      page: 1,
      perPage: 20,
      mergeDialog: false
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    hasSelect() {
      return !!this.mainId;
    }
  },
  methods: {
    openDialog(data) {
      this.mergeData = data || [];
      this.dialogVisible = true;
    },
    changeMainId(id) {
      this.mainId = id;
    },
    isSelect(id) {
      return this.mainId === id;
    },
    handleClose() {
      this.dialogVisible = false;
      this.mainId = '';
    },
    mergePost() {
      const self = this;
      this.$nextTick(() => {
        self.$refs['mergeDialog'].openMergeDialog();
      });
    },
    mergeStart(params) {
      const data = params;
      const ids = this.mergeData.map(e => e.mediumId);
      const idx = ids.indexOf(this.mainId);
      ids.splice(idx, 1);
      data.mergeIds = [{
        mainId: this.mainId,
        ids
      }];
      newMerge(data).then(res => {
        if (res.code !== 200) {
          this.$message.error(res.message);
          return;
        }
        this.dialogVisible = false;
        this.$emit('freshData');
      }).catch(err => {
        console.log(err);
      });
    },
    handleData(data) {
      return data.slice((this.page - 1) * this.perPage, this.page * this.perPage);
    },
    handleSizeChange(size) {
      this.perPage = size;
    },
    handleCurrentChange(page) {
      this.page = page;
    },
    tableRowClassName({ row, rowIndex }) {
      let baseClass = 'pointer';
      if (row.status === 0) {
        baseClass = baseClass + ' invalid-class';
      }
      if (this.isSelect(row.mediumId)) {
        baseClass = baseClass + ' table-selected';
      }
      return baseClass;
    }
  }
};
</script>
<style lang="scss" scoped>
  .resource-merge{
    .merge-resource-dialog{
      .right-tip{
        margin-left: 8px;
      }
      &::v-deep {
        .el-dialog{
          border-radius: 8px ;
        }
        .el-dialog__header{
          padding: 0;
          bottom: 0;
        }
        .el-dialog__body{
          padding: 20px 24px 8px;
        }
        .invalid-class {
          .cell,.resource-name {
          color: #999 !important;
        }
    }
      }
    }
    .radios{
      display: inline-block;
      width: 14px;
      height: 14px;
      border: 1px solid #DCDFE6;
      background: #fff;
      border-radius: 50%;
      box-sizing: border-box;
    }
    .pointer{
      cursor: pointer;
    }
    .selected{
      border:5px solid #406EFF!important;
      background: #fff!important;
      background-clip: content-box;
    }
    .link-name {
      display: flex;
      align-items:center;
      color: #406eff;
      img {
        position: relative;
        top: 1px;
        width: 11px;
        margin-left: 3px;
      }
      .el-icon-link {
        font-size: 12px;
      }
    }
    .table-selected {
      td {
        background-color: red!important;;
      }
    }
  }
</style>
